<template>
	<view class="login">
		<view class="" style="display: none;">
			<u--input></u--input>

		</view>
		<view class="lg">
			<!-- <image src="https://www.anhuimiller.com:441/profile/upload/default.jpg" mode=""
				style="border-radius: 50%;width: 256rpx;height: 256rpx;"></image> -->
				<image src="/static/images/青年联合会.png" mode=""
					style="border-radius: 50%;width: 256rpx;height: 256rpx;"></image>
		</view>
		<view class="hy">
			阜阳青联在线
		</view>
		<input type="number" @blur="onblurphonenumber"
			style="color: #fff;text-align: left: ;;font-size: 32rpx;border-bottom: 1rpx solid #EBFCFF;"
			placeholder="手机号">
		</input>
		<input @blur="onblurpassword"
			style="color: #fff;text-align: left: ;;font-size: 32rpx;margin-top: 30rpx;border-bottom: 1rpx solid #EBFCFF;"
			placeholder="密码">
		</input>
		<!-- 登录按钮 -->
		<view class="login-button" @click="login">
			登录
		</view>
		<!-- 选择其他登录方式 -->
		<view class="else">

			<view class="header">
				选择其他登录方式
			</view>
<!-- 			<image src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/wxtb_bbk.png" mode=""
				class="image" @click="wxHandleLogin"></image> -->
				<image src="/static/images/微信小图标.png" mode=""
				class="image" @click="wxHandleLogin"></image>
		</view>
		<!-- 登录未通过弹出的盒子 -->
		<u-popup :show="show" mode="center" :round="10" @close="close">
			<view class="u-popup-header">
				绑定手机号
			</view>
			<view class="" style="width: 718rpx;">
				<view class="inputTwo">
					<input class="input" @blur="onblur" type="number" name="" placeholder="请输入手机号" maxlength="11">
					<input class="input " style="width: 348rpx;margin: 66rpx 0 96rpx 0;" @blur="verification"
						type="number" name="" placeholder="请输入验证码" maxlength="6">
					<view class="wrap">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" ref="uCode" @click="fscode" @change="codeChange"></u-code>
						<u-button @tap="getCode">{{tips}}</u-button>
					</view>
				</view>
			</view>
			<view class="button" @click="wxtwo" style="margin-top: 60rpx;">
				确认绑定
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
				// 手机号登录
				userInfo: {
					phonenumber: '',
					password: '',
				},
				// 微信授权登录
				wxcode: {
					code: '',
					phonenumber: '',
					verificationCode: ''
				},
				show: false //控制输入手机号的弹框
			};
		},
		methods: {
			// 验证框里面的值
			verification(e) {
				this.wxcode.verificationCode = e.target.value
			},
			// 倒计时的值
			codeChange(text) {
				this.tips = text;
			},
			// 发送验证码
			getCode() {
				// 清空所有本地存储
				this.qingkong()
				// 校验手机号
				if (!uni.$u.test.mobile(this.wxcode.phonenumber)) {
					uni.showToast({
						title: "请输入正确手机号！",
						icon: "none"
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(async () => {
						const res = await uni.$http.post(`/message/code?phone=${this.wxcode.phonenumber}`)
						console.log(res.data);
						if (res.data.code === 200) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.$u.toast('验证码发送失败！');
						}

					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 手机号的值
			onblur(e) {
				this.wxcode.phonenumber = e.target.value
			},
			// 手机登录的手机号
			onblurphonenumber(e) {
				this.userInfo.phonenumber = e.target.value
			},
			// 手机登录的密码
			onblurpassword(e) {
				this.userInfo.password = e.target.value
			},
			// 点击遮罩层关闭
			close() {
				this.show = false
				// 清空
				this.wxcode = {
					code: '',
					phonenumber: '',
					verificationCode: ''
				}
			},
			//微信授权登录
			async wxHandleLogin() {
				uni.showLoading({
					title: '正在登录'
				})
				// 清空本地所有的信息
				this.qingkong()
				// this.$modal.loading("登录中，请耐心等待...");
				//获取服务商信息
				setTimeout(() => {
					uni.getProvider({
						service: "oauth",
						success: (res) => {
							if (~res.provider.indexOf("weixin")) {
								//登录
								uni.login({
									provider: "weixin",
									success: (loginRes) => {
										this.wxcode.code = loginRes.code
										//获取用户信息
										uni.getUserInfo({
											success: (resInfo) => {
												// console.log("用户信息", resInfo);
												//设置偏移量和加密数据
												this.wxcode.encryptedIv =
													resInfo.iv;
												this.wxcode.encryptedData =
													resInfo
													.encryptedData;
												// 向后端发起登录请求
												// this.sendWxLoginFormToLocalService();
												// 拿到code，调用登录接口
												this.wxlogin()
											}
										})
									},
									fail: function(err) {
										uni.hideLoading();
										uni.showToast({
											icon: 'none',
											title: err
										})
									}
								});
							}
						}
					})
				}, 1000)
			},
			// 点击确定，再次登录
			wxtwo() {
				//校验手机号
				if (!uni.$u.test.mobile(this.wxcode.phonenumber)) {
					uni.showToast({
						title: "请输入正确手机号！",
						icon: "none"
					})
					return
				}

				this.wxHandleLogin()
			},
			// 微信登录
			async wxlogin() {
				const res = await uni.$http.post('/wxLogin', this.wxcode)
				if (res.data.code === 500) {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					// 绑定手机号，确定是不是委员
					setTimeout(() => {
						this.show = true
					}, 1500)
					return
				} else if (res.data.code === 200) {
					uni.showToast({
						title: '登录成功'
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
					console.log('微信登录获取的用户信息');
					// 缓存用户信息
					// result.rawData.roleKey这是管理员的唯一标识
					this.$store.commit('user/setroleKey', res.rawData.roleKey)
					// 将token存储起来
					this.$store.commit('user/setToken', res.rawData.token)
					// 缓存用户信息
					this.$store.commit('user/setUserInfo', res.data.user)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}

			},
			// 点击登录
			login() {
				uni.showLoading({
					title: '正在登录'
				})
				// 校验手机号
				if (!uni.$u.test.mobile(this.userInfo.phonenumber)) {
					uni.showToast({
						title: "请输入正确手机号！",
						icon: "none"
					})
					return
				}
				// 登录之前清空所有用户信息
				this.qingkong()
				setTimeout(async () => {
					let result = await uni.$http.post('/miniLogin', this.userInfo)
					if (result.data.code === 500) {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						})
					} else if (result.data.code === 200) {
						uni.showToast({
							title: '登录成功'
						})
						uni.switchTab({
							url: '/pages/index/index'
						})
						// result.rawData.roleKey这是管理员的唯一标识
						this.$store.commit('user/setroleKey', result.rawData.roleKey)
						// 将token存储起来
						this.$store.commit('user/setToken', result.rawData.token)
						// 缓存用户信息
						this.$store.commit('user/setUserInfo', result.data.user)
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						})
					}
				}, 500)
			},
			// 清空所有存储信息
			qingkong() {
				uni.removeStorageSync('roleKey'),
					uni.removeStorageSync('token')
			}
		}
	}
</script>

<style lang="scss">
	// 验证码样式
	.u-button--info {
		position: absolute !important;
		top: 160rpx;
		right: 0rpx;
		width: 202rpx !important;
		height: 96rpx !important;
		opacity: 1;
		border-radius: 20rpx !important;
		background: rgba(22, 193, 219, 1) !important;
		box-shadow: 0px 2rpx 8rpx 0px rgba(20, 58, 64, 0.1) !important;
		color: #fff !important;
		font-size: 24rpx !important;
	}

	.button {
		width: 366rpx;
		height: 88rpx;
		border-radius: 60rpx;
		background: rgba(22, 193, 219, 1);
		box-shadow: 0px 1px 4px 0px rgba(0, 115, 133, 0.2);
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 88rpx;
		color: rgba(235, 252, 255, 1);
		text-align: center;
	}

	.u-popup-header {
		text-align: center;
		margin-top: 64rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(20, 58, 64, 1);
		margin-bottom: 48rpx;
	}

	page {
		background: rgba(14, 176, 201, 1) !important;
	}

	.login {
		box-sizing: border-box;
		// position: absolute;
		width: 100%;
		// height: 100%;
		height: 1624rpx;
		opacity: 1;
		// background:  #0EB0C9;
		padding: 160rpx 32rpx 0 32rpx;

		.lg {
			font-size: 48rpx;
			font-weight: 700;
			color: rgba(235, 252, 255, 1);
			text-align: center;
			margin-bottom: 48rpx;
		}

		.hy {
			font-size: 48rpx;
			font-weight: 600;
			color: rgba(235, 252, 255, 1);
			text-align: center;
			margin-bottom: 94rpx;
		}

		.login-button {
			// position: absolute;
			// bottom: 672rpx;
			margin-top: 220rpx;
			width: 680rpx;
			height: 88rpx;
			border-radius: 60rpx;
			background: #EBFCFF;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 88rpx;
			color: rgba(14, 176, 201, 1);
			text-align: center;

		}
	}

	::v-deep .u-form-item__body {
		padding-bottom: 4rpx !important;
	}

	::v-deep .u-form-item {
		margin-bottom: 30rpx;
	}

	::v-deep .u-input__content__field-wrapper__field {
		color: #f5fdff !important;
	}

	::v-deep .u-popup__content {
		background-color: #f5fdff !important;
	}

	.inputTwo {
		position: relative;
		margin: 0 auto;
		width: 558rpx;

		.input {

			width: 100%;
			height: 96rpx;
			opacity: 1;
			border-radius: 20rpx;
			background: rgba(245, 253, 255, 1);
			box-shadow: 0px 2rpx 8rpx 0px rgba(20, 58, 64, 0.1);
		}
	}


	.register {
		position: absolute;
		bottom: 572rpx;
		left: 50%;
		transform: translate(-50%);
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(235, 252, 255, 1);
		text-align: center;
	}

	.else {
		margin-top: 306rpx;
		text-align: center;

		.header {
			height: 20rpx;
			/** 文本1 */
			font-size: 16rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 0px;
			color: rgba(235, 252, 255, 1);
			text-align: center;
			vertical-align: top;
			margin-bottom: 36rpx;
		}

		.image {
			width: 84rpx;
			height: 84rpx;

		}
	}
</style>